//***vdoing主题-样式变量***//

// 以下注释的变量仅供参考，主题使用的最新变量请查看：https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/theme-vdoing/styles/palette.styl
// 你可以在这个文件内修改这些变量的值

// 主题调色板

// 原主题预设变量
// 颜色
// $accentColor = #3eaf7c
// $textColor = #2c3e50
// $borderColor = #eaecef
// $codeBgColor = #282c34
// $arrowBgColor = #ccc
// $badgeTipColor = #42b983
// $badgeWarningColor = darken(#ffe564, 35%)
// $badgeErrorColor = #DA5961
// 布局
// $navbarHeight = 3.6rem
// $sidebarWidth = 20rem
// $contentWidth = 740px
// $homePageWidth = 960px
// 代码块
// $lineNumbersWrapperWidth = 3.5rem


//***vdoing主题-变量***//

// 颜色

$bannerTextColor = #fff // 首页 banner 区(博客标题)文本颜色
$accentColor = #11A8CD
$activeColor = #ff5722
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1100px
$rightMenuWidth = 230px // 右侧菜单

// 代码块
$lineNumbersWrapperWidth = 2.5rem

// Young Kbt
// 代码块的行数字颜色
div[class*="language-"]
  &.line-numbers-mode
    .line-numbers-wrapper
      color #9e9e9e

// 加粗字体颜色
strong
  // color 
  color #00A55A

.suggestions
  max-height 800 px
  overflow-y scroll
.suggestions .highlight
  color #64acff
  font-weight bold

p code {
  // `` 包括的高亮，点击高亮后不再全选
  user-select: auto !important;
}
// 该 bug 官方已经修复，所以目前不再需要
// .theme-vdoing-content:not(.custom) > h1,
// .theme-vdoing-content:not(.custom) > h2,
// .theme-vdoing-content:not(.custom) > h3,
// .theme-vdoing-content:not(.custom) > h4,
// .theme-vdoing-content:not(.custom) > h5,
// .theme-vdoing-content:not(.custom) > h6 {
//   margin-top: -1.1rem;
//   padding-top: 2.6rem;
// }

.theme-mode-light
  --bodyBg: #f4f4f4
  --mainBg: #ffffff
  --sidebarBg: #fff6
  --blurBg: #fff6
  --customBlockBg: #fff
  --textColor: #00323c
  --textLightenColor: #d63200     // `` 高亮，原来是 #0085AD
  --borderColor: rgba(0,0,0,.15)
  --color-pink-light: #99CCFF; /* 定义亮色主题下的滚动条颜色 */
  --CardBoxbg: #fff6;  /* 首页卡片背景颜色 */
  --CardBox-radius: 10px
  // 代码块浅色主题
  //--codeBg: #f6f8fa
  //--codeColor: #24292e
  //codeThemeLight()
  // 行高亮颜色，和代码块浅色主题一起使用，一起注释
  //div[class*="language-"]
  //  .highlight-lines
  //    .highlighted
  //      background-color rgba(200,200,200,.4)
  //  &.line-numbers-mode
  //    .highlight-lines .highlighted
  //      &:before
  //        background-color rgba(200,200,200,.4)
  // 代码块深色主题
  --codeBg: #282C34
  --codeColor: #D4D4D4
  codeThemeDark()
  // 行高亮颜色，和代码块深色主题一起使用，一起注释
  div[class*="language-"]
    .highlight-lines
      .highlighted
        background-color rgba(0,0,0,.66)
    &.line-numbers-mode
      .highlight-lines .highlighted
        &:before
          background-color rgba(0,0,0,.66)
  div[class*="language-"].line-numbers-mode::after  // 代码块的行数和内容分割线颜色
    border-right 1px solid rgba(0, 0, 0, 0.66)
   // 下面代码块深色和浅色通用
   // `` 包裹的背景色
  .theme-vdoing-content
    code
      background-color #fff5f5
      //background-color transparent
  // 引用的颜色
  blockquote
    background-color #fdefee
    border-left .25rem solid #e95f59
    padding 10px 16px
    opacity .9
  // 选中代码块的颜色
  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
  code[class*="language-"]::selection, code[class*="language-"] ::selection {
    text-shadow none
    background-color #0A62C9
  }
  // mark 标签配置
  mark
    color #d63200
    border .1em solid #d63200
    background-color transparent
    padding .1rem .5rem
    border-radius 2rem
    margin 0 .2rem
    font-size .95rem
  // ::: details 的边框
  .custom-block.details
    border solid 1px #ddd

// 深色模式
.theme-mode-dark
  --bodyBg: rgba(40,40,56,1)
  --mainBg: rgb(64, 64, 64)
  --sidebarBg: rgba(40,40,56,.8)
  --blurBg: #00000066
  --customBlockBg: rgba(25,25,49,0.53)
  --textColor: #acb7c4
  --textLightenColor: #b160ea   // `` 包裹的文字颜色
  --borderColor: #1d1d26
  --codeBg: #1d1d26
  --codeColor: #A9B7C6
  --color-green-light: #322d31; /* 定义暗色主题下的滚动条颜色 */
  --CardBoxbg:rgba(0,0,0,0.4);  /* 首页卡片背景颜色 */
  --CardBox-radius: 10px
  codeThemeDark()
  div[class*="language-"].line-numbers-mode::after  // 代码块的行数和内容分割线颜色
    border-right 1px solid rgba(0, 0, 0, 0.66)
  // `` 包裹的背景色
  .theme-vdoing-content
    code
      background-color transparent
  // 引用的颜色
  blockquote
    background-color rgba(25, 25, 49, 0.53)
    border-left .25rem solid #904ac2
    padding 10px 16px
  // 首页每一个模块的边框
  .card-box
    border-radius: 5px;
    background var(--CardBoxbg);
    box-shadow 0 2px 10px 0 rgba(0,0,0,.20);
    transition box-shadow 0.5s;
  .card-box:hover
    box-shadow 2px 2px 15px 2px rgba(0,0,0,.40);
  // mark 标签配置
  mark
    color #b160ea
    border .1em solid #b160ea
    background-color transparent
    padding .1rem .5rem
    border-radius 2rem
    margin 0 .2rem
    font-size .95rem
  // 表格的样式
  table
    border-color #1d1d26
    thead
      background-color #2c2c47
      font-size 1.02rem
  tr:nth-child(2n)
    background-color #2c2c47
  // 信息框容器颜色
  .custom-block.tip,
  .custom-block.warning,
  .custom-block.danger,
  .custom-block.note
    background-color rgba(25,25,49,0.53)
  .custom-block.danger
    color #ff4545
    .custom-block-title
      color #ff4545
  .custom-block.note
    color #28a1de
  // 鼠标悬停、a 标签颜色，主题默认颜色 #11a8cd
  .nav-item > a:not(.external):hover,
  .nav-item > a:not(.external).router-link-active,
  .nav-item .dropdown-title a:hover,    // 导航栏悬停
  .nav-item .dropdown-title a.router-link-active,
  .dropdown-wrapper .dropdown-title .title:hover    // 导航栏非 a 标签
    border-bottom 2px solid #b160ea

  a.sidebar-link.active     // 侧边栏当前标题
    color #b160ea
    border-left-color #b160ea

  .post-list .post .title-wrapper a:hover,   // 首页文章列表悬停
  .blogger-wrapper .icons a:hover,     // 首页头像下的图标悬停
  .categories-wrapper .categories a:not(.active):hover,   // 文章分类悬停
  .pagination span:hover,       // 首页的上一页和下一页悬停
  a.sidebar-link:hover,   // 侧边栏悬停
  .right-menu-wrapper .right-menu-content .right-menu-item.active a,  // 文章右侧当前标题
  .right-menu-wrapper .right-menu-content .right-menu-item a:hover,   // 文章右侧标题悬停
  .dropdown-wrapper .nav-dropdown .dropdown-item a:hover,   // 导航栏的二级导航悬停
  .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,   // 导航栏的选中二级导航
  .buttons .button .select-box li.active,    // 当前主题模式
  .buttons .button .select-box li:hover,      // 三个主题模式悬停 
  .archives-page .theme-vdoing-wrapper li a:hover,   // 归档列表悬停
  .search-box .suggestions .focused a:hover,   // 搜索框内容鼠标悬停
  .custom-block.details summary:hover     // ::: details 的标题悬停
    color #b160ea

  .categories-wrapper .categories a:not(.active):hover,   // 文章分类悬停
  .right-menu-wrapper .right-menu-content .right-menu-item.active,
  .search-box input:focus   // 搜索框获取焦点
    border-color #b160ea

  .buttons .button:hover      // 右下角三个图标
    background #904ac2
    box-shadow 0 0 15px #904ac2
  .pagination .pagination-list span.active,     // 分页的当前页
  .search-box .suggestions .parent-page-title   // 搜索框的标题
    background #904ac2

  // vuepress-plugin-tabs 插件的背景色
  .tabs-component-tab,
  .tabs-component-panels
    background-color rgba(25,25,49,0.53)
    border none
  // vuepress-plugin-tabs 插件的标题选中颜色
  .tabs-component-tab.is-active       
    color #b160ea

// 阅读模式
.theme-mode-read
  --bodyBg: rgb(236,236,204)
  --mainBg: rgba(245,245,213,1)
  --sidebarBg: rgba(245,245,213,.8)
  --blurBg: rgba(245,245,213,.9)
  --customBlockBg: rgb(236,236,204)
  --textColor: #704214
  --textLightenColor: #996633
  --borderColor: rgba(0,0,0,.15)
  --codeBg: #282c34
  --codeColor: #fff
  codeThemeDark()

// 顶部进度条插件
 $readingBgColor = transparent
 $readingZIndex = 1000
 $readingSize = 3px
 $readingProgressColor = #FFCCCC
 $readingProgressImage = none

$MQWide ?= 1440px
$MQMobile ?= 768px

/* 顶部渐变色 */
.reading-progress .progress {
  background: linear-gradient( 114.2deg,  
  rgba(184,215,21,1) -15.3%,
  rgba(148,187,233,1) 14.5%,
  rgba(21,215,182,1) 38.7%,
  rgba(129,189,240,1) 58.8%,
  rgba(219,108,205,1) 77.3%,
  rgba(240,129,129,1) 88.5% ) !important;
}

/* 导航栏模糊样式 */
.navbar{
  backdrop-filter: blur(6px);
}

/* 控制首页整个壁纸高度 */
.vdoing-index-class .home-wrapper .banner {
  margin-top: 0!important;
  height: 100vh;
  background-attachment: fixed!important;
}

.banner-conent {
  /* 首页banner内容 垂直居中*/
  margin-top: 23vh!important;
}

/* 侧边栏样式 */
.sidebar {
  background-color: var(--sidebarBg);
  backdrop-filter: blur(6px);
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}

::-webkit-scrollbar-track {
  border-radius: 2em;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: var(--color-pink-light) !important;
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 鼠标样式 */
body {
    font-family: MiSans,sans-serif;
    cursor: url(/img/default.cur),auto!important
}

a,button,img {
    cursor: url(/img/pointer.cur),auto!important
}

/* 友链卡片悬停阴影 */
.cardListContainer .card-list .card-item.row-3 {
  /* 默认状态下无阴影或设置初始样式 */
  transition: box-shadow 0.5s ease; /* 添加过渡效果，使阴影出现更平滑 */
  border-radius: 6px;
}
.cardListContainer .card-list .card-item.row-3:hover {
  box-shadow:0 0 10px rgba(240, 129, 129, 1);
}

.cardListContainer .card-list .card-item div p {
    margin: 0;
    padding: 0 1rem;
    transition: text-shadow 0.4s;
    text-align: center;

    /* 新增多行文本溢出隐藏样式 */
    width: 170px; /* 设置元素宽度，根据实际情况调整 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制显示的行数，可按需修改 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1rem;
}

/* docs\.vuepress\common\footer.ts页脚样式 */
/* 页脚的颜色 */
.footer {
  color: #3399fe;  /* 默认颜色 */
}

/* 链接的样式 */
.footer a {
  color: #3399fe; /* 链接的默认颜色 */
  text-decoration: none; /* 避免链接的下划线样式 */
}

/* 鼠标悬浮在链接上时的颜色 */
.footer a:hover {
  color: #5a9bf1; /* 悬浮时改变颜色 */
}

/* 首页文章背景 */
.card-box {
  background-color: var(--CardBoxbg);
  backdrop-filter: blur(4px);
  transition: filter 0.3s ease; /* 添加过渡效果，使模糊变化更平滑 */
  border-radius: var(--CardBox-radius); /* 设置四个角的圆角半径为 10px */

}

.card-box:hover {
  box-shadow: 0 10px 16px -4px #6196cc; /* 设置鼠标悬停时的阴影效果 */
  transform: translateY(-3px); /* 设置鼠标悬停时的垂直位移 */
  border-color: #3475f5; /* 设置鼠标悬停时的边框颜色 */
}

/* 深色模式卡片圆角配置 */
.theme-mode-dark .card-box {
  border-radius: var(--CardBox-radius); /* 设置四个角的圆角半径为 10px */
}

.title-wrapper {
  /*首页卡片高度*/
  margin: 1.5rem;  
}

/* 首页文章标题样式 */
.post-list .post .title-wrapper a {
  position: relative; /* 设置元素为相对定位 */
  display: inline-block; /* 设置元素为行内块元素 */
  transition: color 0.3s ease; /* 设置颜色过渡效果 */
}

.post-list .post .title-wrapper a:hover {
  color: rgb(0 118 255); /* 设置鼠标悬停时的文字颜色 */
}

.post-list .post .title-wrapper a::after {
  content: ''; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  left: 50%; /* 从中间开始 */
  bottom: -2px;
  width: 0; /* 初始宽度为0 */
  height: 2px;
  background: rgb(0 118 255);
  transform: translateX(-50%); /* 居中定位 */
  transition: 
  width 0.3s ease-out,
  left 0.3s ease-out; /* 添加 left 的过渡 */
}

.post-list .post .title-wrapper a:hover::after {
  left: 50; /* 扩展到最左侧 */
  width: 100%; /* 宽度充满容器 */
}